<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外出申请</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }

        .link {
            display: inline-block;
            width: 50%;
            height: 42.6px;
            color: #52C7CA;
            font-size: 14px;
            text-align: center;
            line-height: 42.6px;
        }

        .li2>a {
            color: #2f342b;
            text-decoration: none;
        }

        .header {
            position: relative;
            box-sizing: border-box;

            height: 126px;
            background-color: #52C7CA;

        }

        .pic {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 86px;
            height: 86px;

            background-color: #fff;
            border-radius: 43px;
        }

        .pic img {
            width: 80px;
            height: 80px;
            margin: 3px;
        }

        .info {
            color: #fff;
            font-size: 16px;
            width: 207.14px;
            height: 29.6px;
        }

        .top {
            position: absolute;
            top: 30px;
            left: 126px;
        }

        .bottom {
            position: absolute;
            top: 60px;
            left: 126px;

        }

        .mid {
            height: 50px;
            margin: 0 30px;
            font-size: 18px;
            line-height: 50px;
            border-bottom: 1px solid #eee;

        }

        .time {
            color: #ff9918;
            font-size: 14px;
            margin: 15px 0 0;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .time img {
            width: 26px;
            height: 26px;
            display: inline-block;
            vertical-align: middle;
        }

        .time::before {
            content: '';
            display: inline-block;
            width: 0px;
            height: 26px;
            background: url(ld2.png);
            background-size: 26px 26px;
            vertical-align: middle;
        }


        .qr {
            width: 170px;
            height: 170px;
            background: url(qr1.png);
            background-size: contain;
            border: 1px solid rgba(239, 239, 239, 1);
            margin: 0 auto;
        }

        .qr img{
            width: 155px;
            height: 155px;
            margin: 8px;
        }

        P {
            color: rgb(146, 150, 156);
            font-size: 12px;
            height: 12px;
            line-height: 12px;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <span class="link">外出申请</span>
    <span class="link li2">
        <a href="#">外出记录</a>
    </span>
    <div class="header">
        <div class="pic"><img src="/img/Avatar.PNG"></div>
        <div class="info top">
            <span class="name"></span> 
            <span class="id"></span>
        </div>
        <div class="info bottom">
            <span class="school"></span>/
        </div>
    </div>
    <div class="mid">临时出校二维码</div>
    
    <div class="time">  
        <img class="hourglass" src="/img/time.png"> 
        距离返校时间还剩：0天 
        <span class="hr"></span>:<span class="min"></span>:<span class="sec"></span>
    </div>
    <div class="qr"><img id="qrcode"></div>
    <p>请向校方检查人员出示二维码，扫码进出校～</p>


    <script>
        var name = sessionStorage.getItem('name');
        var id = sessionStorage.getItem('id');
        var school = sessionStorage.getItem('school');
        if (name === 'null') {
            var name = prompt("姓名", "")
            var id = prompt("学号", "")
            var school = prompt("学院", "")
        }
        var name_2 = document.querySelector('.name');
        var id_2 = document.querySelector('.id');
        var school_2 = document.querySelector('.school');
        name_2.innerHTML = name;
        id_2.innerHTML = id;
        school_2.innerHTML = school;
        sessionStorage.setItem('name', name);
        sessionStorage.setItem('id', id);
        sessionStorage.setItem('school', school);

        var hr = document.querySelector('.hr');
        var min = document.querySelector('.min');
        var sec = document.querySelector('.sec');

        document.getElementById("qrcode").src = "https://api.qrserver.com/v1/create-qr-code/?data="+ id +"&color=221-105-234";

        function countDown() {
            var nowTime = new Date();

            var h = 23 - nowTime.getHours();
            h = h < 10 ? '0' + h : h;
            hr.innerHTML = h;

            var m = 59 - nowTime.getMinutes();
            m = m < 10 ? '0' + m : m;
            min.innerHTML = m;

            var s = 59 - nowTime.getSeconds();
            s = s < 10 ? '0' + s : s;
            sec.innerHTML = s;
        }
        var timer = null;
        countDown();
        setInterval(countDown, 1000);
    </script>
</body>

</html>
